<template>
<div class="header">
<h1>用户列表</h1>

<div class="her">
<img src="@/assets/logo.png" alt="">
<p>账号:{{}}</p></div>

</div>

<main>
  <div class="left">

  <el-collapse v-model="activeNames" @change="handleChange">
  <el-collapse-item title="主页" name="1">
    <router-link :to="{name : 'HomeUser'}">修改用户信息</router-link>
  </el-collapse-item>
  <el-collapse-item title="前台首页" name="2">
  </el-collapse-item>
  <el-collapse-item title="用户管理" name="3">
    <router-link :to="{name : 'HomeCart'}">用户列表</router-link>
  </el-collapse-item>
  <el-collapse-item title="商品" name="4">
    <div><router-link :to="{name : 'HomeShopin'}">商品管理</router-link></div>
    <div><router-link :to="{name : 'HomeLogin'}">商品分类管理</router-link></div>
    <div>商品列表</div>
    <div><router-link :to="{name : 'HomeLunbo'}">轮播图管理</router-link></div>
    <div><router-link :to="{name : 'HomeDan'}">订单管理</router-link></div>
  </el-collapse-item>
  <el-collapse-item title="营收管理" name="5">
  </el-collapse-item>
  <el-collapse-item title="文件管理" name="6">
  </el-collapse-item>
</el-collapse>



  </div>

  <div class="right">

    <div class="r1">
       <el-select v-model="value" placeholder="用户id">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
  </el-select>

    <el-input v-model="input" width="50rem" placeholder="请输入用户id" ></el-input>

    <el-button color="rgb(58, 162, 231)">搜索</el-button>
    <el-button color="orange">重置</el-button>
    </div>

    <div class="r2">
    <el-button color="blue">添加用户</el-button>
    <el-button color="red">批量删除</el-button></div>

    <div>

       <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="ID" >
    </el-table-column>
    <el-table-column prop="user" label="账号">
    </el-table-column>
    <el-table-column prop="identity" label="身份">
    </el-table-column>
    <el-table-column prop="name" label="昵称">
    </el-table-column>
    <el-table-column prop="phone" label="电话">
    </el-table-column>
    <el-table-column prop="email" label="邮箱">
    </el-table-column>
    <el-table-column prop="address" label="地址">
    </el-table-column>
    

    <el-table-column fixed="right" label="操作" width="100">
      
        <el-button type="text" size="small" plain @click="dialogFormVisible = true">修改</el-button>

         <el-dialog v-model="dialogFormVisible" title="新增用户" width="500">
    <el-form :model="form">
      <el-form-item label="账号" :label-width="formLabelWidth">
        <el-input v-model="form.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        123465
      </el-form-item>
      <el-form-item label="昵称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="身份" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="请选择">
          <el-option label="用户" value="shanghai" />
          <el-option label="新" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="电话" :label-width="formLabelWidth">
        <el-input v-model="form.number" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱" :label-width="formLabelWidth">
        <el-input v-model="form.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="地址" :label-width="formLabelWidth">
        <el-input v-model="form.address" autocomplete="off" />
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  
        <br>
        <el-button type="text" size="small" @click="delet">删除</el-button>
      
    </el-table-column>
  </el-table>


  <el-pagination @size-change="handleSizeChange"
   @current-change="handleCurrentChange" :total="1">
    </el-pagination>
      
    </div>

</div>

</main>


</template>

<script>
export default {
  data(){
    return{
      activeNames: ['1'],
      tableData: [{
            id: 2,
            user:'user',
            identity:'用户',
            email:'1234@qq.com',
            phone: 158888888,
            name: '新用户',

        }, {
          id: 1,
            user:'admin',
            identity:'管理员',
            email:'123@qq.com',
            phone: 1333333333,
            name: '管理员',
        }],
        options: [{
          value: '1',
          label: 'user'
        }, {
          value: '2',
          label: 'admin'
        }],
        value: '',
        currentPage1: 5,
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
      
      
    }
  },
  methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
       handleChange(val) {
        console.log(val);
      }
  }
}
</script>

<style>
.r2{
  display: flex;
  margin: 5px;
  flex-direction: row;
}
.r1{
  display: flex;
  flex-direction: row;
}

.el-collapse-item__title{
  background-color: #2a2a33;
  color: white;
}
.el-collapse-item__header{
  background-color: #2a2a33;
}
.el-collapse{
  background-color: #2a2a33;
}





.header{
  width: 100%;
  height: 100px;
  background-color: #2a2a33;
  color: yellow;
  display: flex;
  flex-direction: row;
  
}
.header img{
  width: 50px;
  height: 50px;
}
.her{
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: row;
}
main{
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

.left{
  width: 200px;
  height: 620px;
  background-color: #2a2a33;
  display: flex;
  flex-direction: column;
}
.right{
  width: 100%;
  overflow: hidden;
}

.ga{
  display: flex;
  flex-direction: column;
}
.ga a{
  margin: 5px;
    color: white;
  text-decoration: none;
}

.one{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.one img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.one a{
  color: white;
  text-decoration: none;
}

.two{
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.two img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.two a{
  color: white;
  text-decoration: none;
}

.three{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.three img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.three a{
  color: white;
  margin: 5px;
  text-decoration: none;
}
.te{
  display: flex;
  flex-direction: column;
}

.four{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.four img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.four a{
  color: white;
  text-decoration: none;
}

.five{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.five img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.five a{
  color: white;
  text-decoration: none;
}

.six{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.six img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
}
.six a{
  color: white;
  text-decoration: none;
}




</style>